<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            提成设置
          </strong>
        </el-col>
      </el-row>
      <div style="color:#909399">提成是按照产品利润计算，产品利润=产品销售价-组成物料总成本-支付手续费，每个角色的提成为产品利润X设置比例，总比例合计不能大于1</div>
      <div style="width: 100%;padding-top: 10px;">
        <el-table
          v-loading="loading"
          :data="profitRules"
          element-loading-text="加载中..."
          highlight-current-row
          border
          style="width: 100%"
        >
          <el-table-column fixed label="方案名称">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column v-for="(type,index) in profitTypes" :key="index" :label="type.name">
            <template slot-scope="scope">
              <div v-for="(item,index2) in scope.row.types" :key="index2">
                <!-- <el-input v-if="item.id == type.id" v-model="item.value" type="number" /> -->
                <el-input-number v-if="item.id == type.id" v-model="item.value" controls-position="right" :min="0" :max="1" precision="4" :step="0.0001" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding-top: 10px;text-align: right;">
        <!-- <el-button icon="el-icon-download" @click="exportData()">导出</el-button> -->
        <el-button type="primary" icon="el-icon-edit-outline" @click="submit()">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      profitTypes: [],
      profitRules: [],
      loading: false
    }
  },
  created() {
    this.getProfitType()
  },
  methods: {
    // 获取分账的类型以及现在的方案，并且查每个方案对应类型的设置数值，没有的，就留空
    getProfitType() {
      this.loading = true
      this.axios.get(`/manage/profit-types`, { params: {
        '@filter': `entity.getType() == 'order' && entity.getEnabled() == true`,
        '@order': `entity.id | DESC`
      }}).then((res) => {
        console.log('pt', res.data)
        this.profitTypes = res.data
        this.axios.get(`/manage/profit-rules`, {
          params: {
            '@display': "['id','name']"
          }
        }).then((res) => {
          const profitRules = res.data
          profitRules.sort((a, b) => a.id - b.id)
          console.log(profitRules)
          this.axios.get(`/manage/profit-settings`).then((res) => {
            const settings = res.data
            // 以rule为主，将3个数组合并到1个数组
            for (const r of profitRules) {
              if (typeof (r.types) === 'undefined') {
                r['types'] = []
              }
              for (const t of this.profitTypes) {
                let had = false
                // 看对应类型是否已经有设置，有就塞，无就默认空
                for (const se of settings) {
                  if (se.type.id === t.id && se.rule && se.rule.id === r.id) {
                    r.types.push({
                      name: t.name,
                      id: t.id,
                      value: se.value,
                      settingId: se.id
                    })
                    had = true
                  }
                }
                if (had === false) {
                  r.types.push({
                    name: t.name,
                    id: t.id,
                    value: 0,
                    settingId: 0
                  })
                }
              }
            }
            console.log('rule', profitRules)
            this.profitRules = profitRules
            this.loading = false
          })
        })
      })
    },
    submit() {
      console.log('rules', this.profitRules)
      const settingData = []
      for (const i of this.profitRules) {
        for (const s of i.types) {
          if (s.settingId == 0) {
            settingData.push({
              rule: i.id,
              method: 1,
              value: s.value,
              type: s.id
            })
          } else {
            settingData.push({
              id: s.settingId,
              rule: i.id,
              method: 1,
              value: s.value,
              type: s.id
            })
          }
        }
      }
      console.log('data', settingData)
      // 将所有数据按setting格式序列化
      if (this.loading) {
        return
      }
      if (settingData.length === 0) {
        this.$message.error('列表暂无数据!')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据交互中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.axios.post(`/manage/profit-settings/batch-update`, settingData,
        { params: { '@mode': 'mixed', '@basis': 'id' }}).then((res) => {
        this.$message.success('数据上送成功')
        loading.close()
      })
    }
  }
}
</script>
